<extend name="work/base_mini"/>
<block name="content">
    <div class="space10">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md7">
                <div class="layui-card">
                    <div class="layui-card-header">{$model_name}概况</div>
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <div class="layui-form-item">
                                <label class="layui-form-label">{$model_name}名称</label>
                                <div class="layui-input-block">
                                    <input type="text" value="{$info.title|default=''}" class="layui-input"
                                           autocomplete="off"
                                           placeholder="不要超过32个汉字" id="stories_title" disabled>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">开始时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" autocomplete="off" class="layui-input"
                                               value="{$info.s_time|default=''}" id="stories_s_time" disabled>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">结束时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" autocomplete="off" class="layui-input"
                                               value="{$info.e_time|default=''}" id="stories_e_time" disabled>
                                    </div>

                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">实际时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" autocomplete="off" class="layui-input"
                                               value="{$info.w_time|default=''}" id="stories_w_time" disabled>
                                    </div>

                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">计划时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" autocomplete="off" class="layui-input"
                                               value="{$info.p_time|default=''}" id="stories_p_time" disabled>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">{$model_name}分类</label>
                                    <div class="layui-input-inline">
                                        <input type="text" autocomplete="off" class="layui-input"
                                               value="{$info.status|default=''}" id="stories_category" disabled>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">{$model_name}状态</label>
                                    <div class="layui-input-inline">
                                        <input type="text" autocomplete="off" class="layui-input"
                                               value="{$info.status|default=''}" id="stories_status" disabled>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">{$model_name}等级</label>
                                    <div class="layui-input-inline">
                                        <input type="text" autocomplete="off" class="layui-input"
                                               value="{$info.level_id|default=''}" id="stories_level_id" disabled>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">发布人</label>
                                    <div class="layui-input-inline">
                                        <input type="text" placeholder="" autocomplete="off" class="layui-input"
                                               value="{$info.uidnickname|default=''}" id="stories_uidnickname" disabled>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">完成人员</label>
                                    <div class="layui-input-inline">
                                        <input type="text" placeholder="" autocomplete="off" class="layui-input"
                                               value="{$info.touidnickname|default=''}" id="stories_touidnickname"
                                               disabled>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">完成时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" placeholder="" autocomplete="off" class="layui-input"
                                               value="{$info.f_time|default=''}" id="stories_f_time"
                                               disabled>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item  layui-form-text ">
                                <label class="layui-form-label">{$model_name}详情</label>
                                <div class="layui-input-block">
                                    <div id="stories_info">
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="space5"></div>
                <div class="layui-card">
                    <div class="layui-card-header">讨论历史</div>
                    <div class="layui-card-body">
                        <div class="layui-form-item  layui-form-text ">
                            <div class="layui-input-block">
                                <ul class="layui-timeline" id="stories_comment_list">
                                </ul>
                            </div>
                        </div>
                        <div id="page"></div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">计时记录</div>
                    <div class="layui-card-body" >
                        <table class="layui-table text-center" id="list" lay-filter="list"
                               list-url="{:url('work_time_lists?project_id='.$project_id.'&model_id='.$model_id)}"
                               edit-url="{:url('work_time_editform?project_id='.$project_id.'&model_id='.$model_id)}"
                               del-url="{:url('work_time_delete?project_id='.$project_id.'&model_id='.$model_id)}"
                        ></table>
                    </div>
                </div>
            </div>
            <div class="layui-col-md5">
                <div class="layui-card">
                    <div class="layui-card-header">操作</div>
                    <div class="layui-card-body">
                        <form class="layui-form" action="{:url()}" method="post">
                            <div class="layui-form-item">
                                <label class="layui-form-label">{$model_name}计时</label>
                                <div class="layui-input-block">
                                    <input type="text" value="" class="layui-input"
                                           autocomplete="off"
                                           placeholder="点开始计时开始计算{$model_name}时间" id="v_time">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-block">
                                    <div class="layui-btn-container">
                                        <button type="button" class="layui-btn layui-btn-normal" lay-submit
                                                lay-filter="s_time">
                                            开始计时
                                        </button>
                                        <button type="button" class="layui-btn layui-btn-danger" lay-submit
                                                lay-filter="p_time">
                                            暂停/ 结束计时
                                        </button>
                                        <button type="button" class="layui-btn" lay-submit lay-filter="sub_time">
                                            保存计时
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <hr class="layui-bg-blue">
                        <form class="layui-form" action="{:url()}" method="post">
                            <div class="layui-form-item">
                                <label class="layui-form-label">{$model_name}状态</label>
                                <div class="layui-input-block">
                                    <select name="model_status" lay-search lay-filter="work_stories_status">
                                        <option value="">选择{$model_name}状态</option>
                                        <volist name="model_status" id="vo" key="k">
                                            <option value="{$k}"
                                            <elt name="k" value="2">disabled</elt>
                                            > {$vo}</option>
                                        </volist>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-block">
                                    <div class="layui-btn-container">
                                        <input type="hidden" name="stories_id" value="{$id}">
                                        <button type="button" class="layui-btn" lay-submit lay-filter="sub_status">
                                            保存{$model_name}状态
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <hr class="layui-bg-blue">
                        <form class="layui-form" action="{:url()}" method="post">
                            <div class="layui-form-item">
                                <label class="layui-form-label">模型转换</label>
                                <div class="layui-input-block">
                                    <select name="new_model_id" lay-search lay-filter="work_stories_model">
                                        <option value="">选择目标模型</option>
                                        <volist name="model" id="vo" key="k">
                                            <option value="{$k}"
                                            <eq name="k" value="$model_id">disabled</eq>
                                            > {$vo}</option>
                                        </volist>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-block">
                                    <div class="layui-btn-container">
                                        <input type="hidden" name="stories_id" value="{$id}">
                                        <button type="button" class="layui-btn" lay-submit lay-filter="sub_model">
                                            保存更改模型
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">添加讨论</div>
                    <div class="layui-card-body">
                        <form class="layui-form" action="{:url()}" method="post">
                            <div class="layui-form-item layui-form-text">
                                <div id="info">
                                    <p></p>
                                </div>
                                <textarea name="info" id="newinfo" style="display: none"></textarea>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-block">
                                    <input type="hidden" name="stories_id" value="{$id}">
                                    <button class="layui-btn " lay-submit lay-filter="formDemo">保存讨论</button>
                                    <br>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>

            </div>
        </div>


    </div>
</block>
<block name="script">
    <script charset="utf-8" src="https://cdn.weibuyun.com/static/admin/plugins/wangeditor/wangEditor.min.js"></script>
    <script charset="utf-8" src="https://unpkg.com/qiniu-js@2.5.4/dist/qiniu.min.js"></script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"> <i class="fa fa-trash-o"></i> 删除</a>
    </script>
    <script type="text/javascript">
        layui.use(['element', 'table', 'form', 'formSelects', 'laypage'], function () {
            var table = layui.table
                , form = layui.form
                , laypage = layui.laypage
                , element = layui.element
                ,$=layui.$
                , formSelects = layui.formSelects
                , content = 0
                , count = 0;
            var m = s = ms = timestatus = 0;  //定义时，分，秒，毫秒并初始化为0；
            var stime;
            var time;

            getstoriesinfo()
            getpage();
            table.render({
                elem: '#list'
                , url: "{:Url('work_time_list?id='.$id.'&project_id='.$project_id.'&model_id='.$model_id)}"
                , page: true
                , loading: true
                , totalRow: true
                , limit: 20
                , cols: [[
                    {field: 'id', width: 70, title: 'ID', unresize: true, sort: true}
                    , {field: 'nickname', title: '{$model_name}完成人员'}
                    , {field: 'c_time', width: 180, title: '操作{$model_name}时间'}
                    , {field: 'w_time', width: 100, title: '实际用时', edit: 'text'}
                    , {fixed: 'right', width: 100, title: '操作', toolbar: '#barDemo'}
                ]]
            });

            function getstoriesinfo() {
                $.ajax({
                    url: "{:url('getstoriesinfo?stories_id='.$id.'&project_id='.$project_id.'&model_id='.$model_id)}",
                    type: 'get',
                    dataType: 'json',
                })
                    .done(function (res) {
                        if (res.data == null) {
                            layer.msg('没有内容', {
                                time: 1500,
                                icon: 5
                            });
                        } else {
                            // count:res.data
                            $('#stories_title').val(res.data.title);
                            $('#stories_s_time').val(res.data.s_time);
                            $('#stories_e_time').val(res.data.e_time);
                            $('#stories_w_time').val(res.data.w_time);
                            $('#stories_p_time').val(res.data.p_time);
                            $('#stories_level_id').val(res.data.level_id);
                            $('#stories_uidnickname').val(res.data.uidnickname);
                            $('#stories_touidnickname').val(res.data.touidnickname);
                            $('#stories_info').html(res.data.info)
                            $('#stories_status').val(res.data.status);
                            $('#stories_category').val(res.data.category_title);
                            $('#stories_f_time').val(res.data.f_time);

                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            time: 1500,
                            icon: 5
                        });
                    })
                    .always(function () {

                    });

            }

            function getpage() {
                $.ajax({
                    url: "{:url('getcommentcount?stories_id='.$id.'&project_id='.$project_id.'&model_id='.$model_id)}",
                    type: 'get',
                    dataType: 'json',
                })
                    .done(function (res) {
                        if (res.data == null) {
                            layer.msg('没有更多内容', {
                                time: 1500,
                                icon: 5
                            });
                        } else {
                            // count:res.data
                            laypage.render({
                                elem: 'page'
                                , count: res.data
                                , limit: 5
                                , theme: '#1E9FFF'
                                , jump: function (obj, first) {
                                    if (obj.curr) {
                                        refresh(obj.curr)
                                    } else {

                                        refresh(1)
                                    }

                                    return false;
                                }
                            });
                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            time: 1500,
                            icon: 5
                        });
                    })
                    .always(function () {

                    });

            }

            function refresh(curr) {
                // console.log(count)
                // console.log(curr)
                $.ajax({
                    url: "{:url('comment_list?stories_id='.$id.'&project_id='.$project_id.'&model_id='.$model_id)}",
                    type: 'get',
                    dataType: 'json',
                    data: {
                        page: curr,
                        limit: 5
                    }
                })
                    .done(function (res) {
                        if (res.data == null) {
                            layer.msg('没有更多内容', {
                                time: 1500,
                                icon: 5
                            });
                        } else {
                            $("#stories_comment_list").html('');
                            $.each(res.data, function (i, n) {
                                var htmlstr = ' <li class="layui-timeline-item">\n' +
                                    '                                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>\n' +
                                    '                                        <div class="layui-timeline-content layui-text">\n' +
                                    '                                            <h4 class="layui-timeline-title">' + n.c_time + '</h4>\n' +
                                    '                                            <ul>\n' +
                                    '                                                <li>' + n.nickname + '</li>\n' +
                                    '                                            </ul>\n' +
                                    '                                            <div class="doc_info">' + n.info + '</div>\n' +
                                    '                                        </div>\n' +
                                    '                                    </li>'
                                $("#stories_comment_list").append(htmlstr)
                                count = res.count;
                            });
                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            time: 1500,
                            icon: 5
                        });
                    })
                    .always(function () {

                    });
            }

            function timer() {   //定义计时函数
                ms = new Date().getTime() - new Date(stime).getTime();
                //  console.log(new Date().getTime());
                //console.log(new Date(stime).getTime());
                ms = ms + 50;         //毫秒
                if (ms >= 1000) {
                    ms = 0;
                    s = s + 1;         //秒
                }
                if (s >= 60) {
                    s = 0;
                    m = m + 1;        //分钟
                }
                str = toDub(m) + "分" + toDub(s) + "秒";
                $('#v_time').val(str);

            }

            function toDub(n) {  //补0操作
                if (n < 10) {
                    return "0" + n;
                } else {
                    return "" + n;
                }
            }

            function toDubms(n) {  //给毫秒补0操作
                if (n < 10) {
                    return "00" + n;
                } else {
                    return "0" + n;
                }
            }

            form.on('submit(s_time)', function (data) {
                if (timestatus === 0) {
                    stime = new Date();
                    time = setInterval(timer, 500);
                    console.log(time);
                    console.log(timestatus);
                }
                timestatus = 1;
                return false;
            });
            form.on('submit(p_time)', function (data) {
                clearInterval(time);
                stime = 0;
                timestatus = 0;
                return false;
            });
            // https://cdn.weibuyun.com/wx/help/notify/
            form.on('submit(sub_model)', function (data) {
                $.ajax({
                    url: "{:url('update_stories_model?project_id='.$project_id.'&model_id='.$model_id)}",
                    type: 'POST',
                    dataType: 'json',
                    data: data.field
                })
                    .done(function (res) {
                        if (res.code == 1) {
                            layer.msg(res.msg, {
                                time: 3000,
                                icon: 1
                            }, function () {

                            });
                        } else {
                            layer.msg(res.msg, {
                                time: 1500,
                                icon: 5
                            });
                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            time: 1500,
                            icon: 5
                        });
                    })
                    .always(function () {

                    });


                return false;
            });
            form.on('submit(sub_status)', function (data) {
                $.ajax({
                    url: "{:url('update_stories_status?project_id='.$project_id.'&model_id='.$model_id)}",
                    type: 'POST',
                    dataType: 'json',
                    data: data.field
                })
                    .done(function (res) {
                        if (res.code == 1) {
                            layer.msg(res.msg, {
                                time: 3000,
                                icon: 1
                            }, function () {

                            });
                        } else {
                            layer.msg(res.msg, {
                                time: 1500,
                                icon: 5
                            });
                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            time: 1500,
                            icon: 5
                        });
                    })
                    .always(function () {

                    });


                return false;
            });
            form.on('submit(sub_time)', function (data) {
                if (m == 0) {
                    m = 1;
                }
                clearInterval(time);
                layer.prompt({
                    formType: 0,
                    value: Number(m),
                    title: '确认计时，如不对请更正(单位小时)',
                }, function (value, index, elem) {
                    $('#w_time').val(value)
                    $.ajax({
                        url: "{:url('addtime?project_id='.$project_id.'&stories_id='.$id.'&model_id='.$model_id)}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            w_time: value
                        }
                    })
                        .done(function (res) {
                            if (res.code == 1) {
                                layer.msg(res.msg, {
                                    time: 3000,
                                    icon: 1
                                }, function () {
                                    m = s = ms = 0;
                                    $('#w_time').val(0);
                                    table.reload('list', {
                                        url: "{:Url('work_time_list?id='.$id.'&project_id='.$project_id.'&model_id='.$model_id)}"
                                        , page: {
                                            curr: 1
                                        }

                                    });
                                });
                            } else {
                                layer.msg(res.msg, {
                                    time: 1500,
                                    icon: 5
                                });
                            }
                        })
                        .fail(function () {
                            layer.msg('服务器异常', {
                                time: 1500,
                                icon: 5
                            });
                        })
                        .always(function () {

                        });
                    layer.close(index);
                });


                return false;
            });
            form.render();
            form.on('submit(formDemo)', function (data) {
                $.ajax({
                    url: "{:url('addcomment?project_id='.$project_id.'&model_id='.$model_id)}",
                    type: 'POST',
                    dataType: 'json',
                    data: data.field
                })
                    .done(function (res) {
                        if (res.code == 1) {
                            layer.msg(res.msg, {
                                time: 3000,
                                icon: 1
                            }, function () {
                                editor.txt.html('')
                                getpage();
                                //$('#newinfo').val('')
                            });
                        } else {
                            layer.msg(res.msg, {
                                time: 1500,
                                icon: 5
                            });
                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            time: 1500,
                            icon: 5
                        });
                    })
                    .always(function () {

                    });
                return false;
            });

            var E = window.wangEditor
            var editor = new E('#info')
            // 或者 var editor = new E( document.getElementById('editor') )
            editor.customConfig.menus = [
                'head',  // 标题
                'bold',  // 粗体
                'fontSize',  // 字号
                'fontName',  // 字体
                'italic',  // 斜体
                'underline',  // 下划线
                'strikeThrough',  // 删除线
                'foreColor',  // 文字颜色
                'link',  // 插入链接
                'list',  // 列表
                'justify',  // 对齐方式
                'quote',  // 引用
                'image',  // 插入图片
                'table',  // 表格
                'undo',  // 撤销
                'redo'  // 重复
            ]
            editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024
            editor.customConfig.uploadImgTimeout = 30000
            editor.customConfig.uploadFileName = 'file'
            editor.customConfig.uploadImgServer = '{:url("file/uploadedit",["type"=>"image"])}';
            editor.customConfig.zIndex = 100;
            editor.customConfig.onchange = function (html) {
                $('#newinfo').html(html)
            }
            editor.customConfig.customUploadImg = function (files, insert) {
                var index = layer.load(1);
                $.ajax({
                    type: "post",
                    url: "/qiniu/gettoken",
                    async: true,
                    success: function (res) {
                        if (res.code == 0) {
                            var token = res.uptoken;
                            var fileName = res.path + files[0].name;
                            var downloadurl = res.downloadurl;
                            var config = {
                                retryCount: 6,
                            };
                            var putExtra = {
                                fname: "",
                                params: {},
                                mimeType: null
                            };
                            var observable = qiniu.upload(files[0], fileName, token, putExtra, config);
                            var subscription = observable.subscribe(
                                {
                                    next(res) {
                                        console.log(res)
                                    },
                                    error(res) {
                                        console.log(res)
                                    },
                                    complete(res) {
                                        layer.close(index);
                                        insert(downloadurl + '?file=' + res.key)
                                    }
                                }
                            );

                        } else {
                            console.log(res.msg)
                        }

                    }
                });
            }
            editor.create()
        });


    </script>
</block>